<template>
  <Modal v-model="visible" @on-visible-change="changeModal" :title="title" width="800">
    <Form :label-width="110" :model="form" ref="form" :rules="rules">
      <Row :gutter="16">
        <Col :md="24">
          <FormItem label="行驶证" prop="drivingLicensePicUrl">
            <ImageUpload   :images="drivingLicenseImg" @on-success="drivingLicensePicUrlSuccess" ref="licenseUpload" action="/base/vehicle/addVehicleLicensePic" accept="image/png,image/jpeg" :width="96" :disabled="disabled"></ImageUpload>
            <Input  style="display:none;" v-model="form.drivingLicensePicUrl" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :md="12">
          <FormItem label="车牌号" prop="plateNumber">
            <Input placeholder="请填写车牌号" v-model="form.plateNumber" :maxlength="8" :disabled="disabled" />
          </FormItem>
        </Col>
        <Col :md="12">
          <FormItem label="车主" prop="owner">
            <Input placeholder="请填写车主" :maxlength="5" v-model="form.owner" :disabled="disabled" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :md="12">
          <FormItem label="车辆识别码" prop="vin">
            <Input placeholder="请填写车辆识别码"  v-model="form.vin" :disabled="disabled" />
          </FormItem>
        </Col>
        <Col :md="12">
          <FormItem label="发动机号" prop="ein">
            <Input placeholder="请填写发动机号" v-model="form.engineNumber" :disabled="disabled" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :md="12">
          <FormItem label="注册日期" prop="regdate">
            <DatePicker type="date" placeholder="请选择" v-model="form.regDateStr" :disabled="disabled" style="width:100%;"></DatePicker>
          </FormItem>
        </Col>
        <Col :md="12">
          <FormItem label="所属机构" prop="orgId">
            <Select v-model="form.orgId" placeholder="选择机构"  :disabled="model!==0" :transfer="true">
              <OrgTreeOption></OrgTreeOption>
            </Select>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" @click="closeModal">取消</Button>
      <Button v-if="!disabled" type="primary" :loading="isModalLoading" @click="doSubmit">保存</Button>
    </div>
  </Modal>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import {post}                             from '@/util/request'
import moment                             from 'moment'
  export default {
    props:{
      value:{type:Boolean,default:false},
      model:{type:Number,default:0},  // 0：新增，1：查看，2：编辑
    },
    mounted(){

    },
    data(){
      return {
        visible:this.value,
        isModalLoading:false,
        drivingLicenseImg:[],
        form:{id:''},
        rules:{
          drivingLicensePicUrl:{required:true,message:'请上传行驶证',trigger:'change'},
          plateNumber:{required:true,message:'请填写车牌号',trigger:'change'},
          owner:{required:true,message:'请填写车主',trigger:'change'},
          vin:{required:true,message:'请填写车辆识别码',trigger:'change'},
          engineNumber:{required:true,message:'请填写发动机号',trigger:'change'},
          regdateStr:{required:true,tyep:'date',message:'请选择注册日期',trigger:'change'},
          orgId:{required:true,message:'请选择所属机构',trigger:'change'},
        }
      };
    },
    watch:{
      value(v){
        this.visible = v;
      },
      visible(v){
        this.$emit('input',v);
      } ,
      viewData(v){
				this.form = {...v};
				if(v.regDate){
					this.form.regDateStr =  moment(v.regDate).format('YYYY-MM-DD');
          this.form.regDate=null;
				}
        this.drivingLicenseImg=[{name:v.drivingLicensePicUrl.substr(v.drivingLicensePicUrl.lastIndexOf('/')),url:v.drivingLicensePicUrl}];
			}
    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('baseinfo/baseinfoVehicle',['viewData']),
      title(){
        let title = '查看车辆信息';
        switch(this.model){
          case 0: title = '新增车辆'; break;
          case 1: title = '查看车辆信息'; break;
          case 2: title = '编辑车辆信息'; break;
        }
        return title;
      },
      disabled(){
        return this.model === 1;
      }
    },
    methods:{
      drivingLicensePicUrlSuccess({file,res}){
        if(res.sta==200){
          let data = res.data;
          this.form.engineNumber=data.engineNumber;
          this.form.owner=data.owner;
          this.form.plateNumber=data.plateNumber;
          this.form.vin=data.vin;
          file.url = data.drivingLicensePicUrl;
          this.form.regDateStr=data.regDate;
          this.form.drivingLicensePicUrl=data.drivingLicensePicUrl;
          this.drivingLicenseImg = [{name:'',url:data.drivingLicensePicUrl}];
        }
      },
      closeModal(){
        this.visible = false;
      },
      changeModal(v){
        if (!v){
          this.form = {id:''};
          this.drivingLicenseImg=[];
          this.$refs.licenseUpload.reset();
          this.$refs.form.resetFields();
        }
      },
      async doSubmit(){
        let v = await this.$refs.form.validate();
        if (v){
          if (this.form.regDateStr!==null) {
            this.form.regDateStr=moment(this.form.regDateStr).format('YYYY-MM-DD');
          }
          if (this.form.id!==''){
            this.submitEdit();
          }else{
            this.submitAdd();
          }
        }
      },
      async submitAdd(){
        this.isModalLoading = true;
  			let res = await post("/base/vehicle/addVehicle",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.$emit('add');
          this.closeModal();
        }else{
          this.$Message.error(res.data.msg);
        }
      },
      async submitEdit(){
        this.isModalLoading = true;
        this.form.createtime && delete this.form.createtime;
        let res = await post("/base/vehicle/updateVehicle",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.$emit('edit',this.form);
          this.closeModal();
        }else{
          this.$Message.error(res.data.msg);
        }
      }
    }
  }
</script>
